<template>
	<view class="brand-showcase">
		<view class="brand-grid">
			<view
				class="brand-item"
				v-for="brand in brands"
				:key="brand.id"
				@tap="onBrandTap(brand)"
			>
				<view class="brand-logo">
					<image
						:src="brand.logo || '/static/empty/no.jpg'"
						class="logo-image"
						mode="aspectFit"
					/>
				</view>
				<text class="brand-name">{{ brand.name }}</text>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { useCool } from "/@/cool";

defineProps<{
	brands: any[];
}>();

const { router } = useCool();

function onBrandTap(brand: any) {
	router.push(`/pages/goods/list?brandId=${brand.id}`);
}
</script>

<style lang="scss" scoped>
.brand-showcase {
	padding: 0 16rpx;
}

.brand-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24rpx;
}

.brand-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 24rpx 16rpx;
	background-color: #ffffff;
	border-radius: 16rpx;
	transition: all 0.3s ease;

	&:active {
		transform: scale(0.95);
		background-color: #f8f9ff;
	}
}

.brand-logo {
	width: 80rpx;
	height: 80rpx;
	margin-bottom: 12rpx;
	border-radius: 8rpx;
	overflow: hidden;
	background-color: #f5f5f5;
}

.logo-image {
	width: 100%;
	height: 100%;
}

.brand-name {
	font-size: 24rpx;
	color: #666;
	text-align: center;
	line-height: 1.2;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
}
</style>
